import React, { useState, useEffect, PureComponent, useContext, createContext, useReducer, memo, useCallback, useMemo, useRef } from 'react'
export default function Test() {
  const [counter, setCounter] = useState(0)
  const divRef = useRef()
  const sonRef = useRef()
  const textRef = useRef()
  console.log('此时还未拿到dom对象', divRef)
  useEffect(() => {
    // 1.相当于componentsDidmount
    console.log('相当于componentsDidmount可以拿到dom对象', divRef)
    divRef.current.textContent = '点击我啊'

    console.log(sonRef, '222')
  }, [])
  
  const divClick = () => {
    textRef.current.focus()
    textRef.current.value = 'bbb'
    setCounter(counter + 1)

    sonRef.current.sonClick()
  }
  return (
    <>
      <div>{counter}</div>
      <TestClassCpn ref={sonRef}></TestClassCpn>
      <input type='text' ref={textRef} />
      <hr />
      <button ref={divRef} onClick={() => divClick()}>
        点击
      </button>
      <hr />
    </>
  )
}
class TestClassCpn extends PureComponent {
  sonClick = () => {
    console.log('son')
  }
  render() {
    return <div>TestClassCpn</div>
  }
}
